{% load bt_tags %}

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="HandheldFriendly" content="True">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <link rel="stylesheet" href="{{ STATIC_URL }}mobile/css/tp/base.css?v=131231">
    <script type="text/javascript" src="{{ STATIC_URL }}dashboard/js/handlebars.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}vacation/js/JS2ObjCBridge.js"></script>
    <script>
    // 面包旅行的 android方法有问题 

    // App 显示底部navigation bar
    var bt_show_bottom_bar = 'YES';

    function total_prices(){
        var prices = 0;
        $(".type-price").each(function(){
            prices = prices + parseInt($(this).text());
        });
        if (surcharge_prices['hotel_name'] < surcharge_prices['second_hotel_name']) {
            var price = surcharge_prices['second_hotel_name'];
        } else {
            var price = surcharge_prices['hotel_name'];
        };
        if (!price) {
            price = 0;
        };
        var total_count = 0;
        $("input[name='count']").each(function() {
            if ($(this).val()) {
                total_count += parseInt($(this).val());
            }
        });
        $("input[name='surcharge']").val(parseInt(price) * total_count);
        $(".surcharge-price").html("￥" + parseInt(price) * total_count);
        if (price == 0) {
            $(".surcharge").hide();
        } else {
            $(".surcharge").show();
        };
        if (price) {
            prices += price * total_count;
        };
        $("#total_prices").text(prices);
    };

    function changeTravelDate() {
        document.getElementById("changeDate").value = true;
        document.getElementById("submit").click();
    }
    function WindowReload() {
        window.location.reload();
    }
    function changeTime() {
        var value = $("input[name='time']").val();
        {% if not is_breadtrip %}
        if ( typeof(android) != "undefined" ) {
            if (value){
                var data = value.split(":");
                android.showSetTimePicker(parseInt(data[0]), parseInt(data[1]));
            } else {
                android.showSetTimePicker(-1, -1);
            };
        };
        {% endif %}
    };

    var not_book_hotel = "在您预订好酒店后，可以通过微信服务号或400电话与我们联系，以确认接送地点和时间。";
    var stay_family = "在预订成功后，您可以通过微信服务号或400电话与我们联系，以确定您最方便的接送地点和时间。";
    var no_hotel = "在预订成功后，您可以通过微信服务号或400电话与我们联系，以确认接送地点和时间。";
    var surcharge_prices = new Object();

    function setHotelName(id, name) {
        $("#id_"+id).val(name);
        if (name=='not_book_hotel') {
            $("#"+id).parents("tr").find("p").text("我还没有预订酒店");
            $("#"+id).html(not_book_hotel);
        } else if (name=='stay_family') {
            $("#"+id).parents("tr").find("p").text("我住在当地亲朋家");
            $("#"+id).html(stay_family);
        } else if (name=='no_hotel') {
            $("#"+id).parents("tr").find("p").text("我的酒店不在列表中");
            $("#"+id).html(no_hotel);
        } else {
            if (id=="hotel_name") {
                $("#"+id).parents("tr").find("p").text("候车酒店");
            } else {
                $("#"+id).parents("tr").find("p").text("送达酒店");
            };
            $("#"+id).html(name);
        };
        $.ajax({
            url: '/product/{{ product.pk }}/region_surcharge/',
            type: 'GET',
            data: {
                'hotel': name,
            },
            success: function(data) {
                surcharge_prices[id] = data.price;
                total_prices();
            }
        });
    };

    function setTime(value) {
        $("input[name='time']").val(value);
    };
    </script>
    <style type="text/css">
        .icon {
            background-image: url({{ STATIC_URL }}img/vacation_order_icon.png?v=1.0);
            display: inline-block;
            background-repeat: no-repeat;
            background-size: 22px 214px;
        }
        .icon-order {
            background-position: 0 -12px;
            width: 22px;
            height: 22px;
            float: left;
            margin-right: 8px;
            margin-top: -2px;
        }
        .icon-info2 {
            background-position: 0 -136px;
            width: 22px;
            height: 23px;
            float: left;
            margin-right: 8px;
            margin-top: -2px;
        }
        .icon-user {
            background-position: 0 -162px;
            width: 22px;
            height: 22px;
            float: left;
            margin-right: 8px;
            margin-top: -2px;
        }
        input[type='time'] {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            color: #999;
            font-size: 16px;
            width: 80%;
            border: none;
            box-sizing: border-box;
            outline: none;
            margin-top: -5px;
        }

        .icon-date {
            background-position: 0 -36px;
            width: 22px;
            height: 22px;
            float: right;
            margin: 11px 15px 12px 0px;
        }
        .icon-type {
            background-position: 0 -62px;
            width: 20px;
            height: 20px;
            float: right;
            margin: 11px 10px 12px 0px;
        }
        .icon-plus {
            background-position: 0 -188px;
            width: 22px;
            height: 22px;
            float: left;
            margin: 10px 10px 10px 18px;
        }
        h1 {
            color: #484848;
            padding-bottom: 0px;
            border-bottom: 0px;
        }
        h2 {
            color: #484848;
            padding-bottom: 0px;
            border-bottom: 0px;
        }
        td span  {
            margin-left: 13px;
            font-size: 16px;
            color: #999;
        }
        td p  {
            margin-left: 13px;
            font-size: 16px;
            color: #999;
        }
        td.td-info {
            background-color:#fbf7ed!important;
        }
        td .span2 {
            float: left;
            width: 100%!important;
        }
        #add_type {
            border-collapse: separate;
            height: 47px;
            background-color: #fbf7ed;
            -webkit-border-radius: 4px;
            border-radius: 4px;
            color: #4abdcc;
            font-size: 18px;
            font-weight: 200;
            border: 1px solid #4abdcc;
            cursor: pointer;
        }
        #add_type b {
            margin: 0px 10px;
            border: 1px solid #4abdcc;
            font-size: 20px;
            font-weight: 100;
            width: 28px;
            height: 28px;
            padding: 0px 6px;
            border-radius: 30px;
            -webkit-border-radius: 30px;
        }
        strong {
            color: #f86c41;
            font-size: 16px;
        }
        strong span {
            color: #f86c41;
        }
        .type-price {
            color: #f86c41;
        }

        .surcharge-price {
            color: #f86c41;
        }
        .total {
            margin-top: 20px;
            padding: 10px 0px;
            border-bottom: 1px solid #b0b0b0;
            border-top: 1px solid #b0b0b0;
            font-size: 14px;
        }
        .total p {
            margin: 0px;
            margin-left: 20px;
        }
        .help_text {
            display: none;
            color: #fc5d7b;
        }
        table td:first-child {
            width: 35%;
            vertical-align: middle;
        }
        .type-description {
            font-size: 13px;
        }
        img {
            width: 12px;
            cursor: pointer;
            float: right;
            margin-top: 18px;
            margin-right: 19%;
        }
        .changeType input {
            width: 67% !important;
        }
        .baby-count {
            display: none;
        }
        #id_baby_count {
            border: 1px solid #c9c9c9;
            width: 50px;
            height: 26px;
            -webkit-border-radius: 4px;
            border-radius: 4px;
            padding-left: 5px;
            margin-right: 5px;
            margin-top: 18px;
        }
        form p {
            margin: 10px 0px 10px 5px;
        }
        .td-btn {
            cursor: pointer;
        }
        .td-btn:active {
            background-color: #f2f2f2 !important;
        }
        .td-btn:active input {
            background-color: #f2f2f2 !important;
        }
        .td-btn input {
            width: 70% !important;
        }
        input[type=checkbox]:checked + label {
            background: url({{ STATIC_URL }}img/vacation_order_icon.png?v=1.0) 10px -88px no-repeat !important;
            background-size: 22px 214px !important;
            height: 21px !important;
        }
        input[type=checkbox] + label {
            background: url({{ STATIC_URL }}img/vacation_order_icon.png?v=1.0) 10px -110px no-repeat !important;
            background-size: 22px 214px !important;
            height: 21px !important;
        }
        .booking-agreement input[type=checkbox] {
            margin: 120px;
        }
        .booking-agreement {
            padding-left: 0px;
            overflow: initial;
        }
        .booking-agreement label {
            padding-left: 40px !important;
            word-wrap: break-word;
            word-break: normal;
        }
        .td-hotel {
            line-height: 22px !important;
            height: 30px !important;
            vertical-align: middle;
            padding-left: 13px;
            color: #999;
        }
        .hotel-label {
            text-align: center;
        }
        .hotel-label p {
            margin: 0px 18px;
            padding: 5px 0px;
            color: #5c5c5c;
            font-size: 14px;
            line-height: 22px;
        }
        input[type='submit'] {
            width: 100% !important;
            border: 0 !important;
            border-radius: 4px !important;
        }
        .surcharge {
        }
    </style>
    <title>预订信息</title>
</head>
<body class="booking" data-user-agent="{{ user_agent }}" data-csrf="{{ csrf_token }}" data-version="{{ app_version }}">
    <section class="booking-form">
        <h2><i class="icon icon-order"></i>基本信息</h2>
        {% if product.template_id != 5 %}
        <p style="color: #999999">多人参加只需填写其中一人护照姓名</p>
        {% endif %}
        <form action="" method="post" enctype="multipart/form-data">
            {% csrf_token %}
            <input type="hidden" id="changeDate" name="change_date">
            <input type="hidden" id="changeType" name="change_type">
            <input type="hidden" id="viewDetail" name="view_detail">
            {% csrf_token %}
            <input type="hidden" name="product" value={{ product.pk }}>
            <p id="booking-error" class="text-error text-center" style="display: block;">{{ error }}</p>
            {% if product.template_id == 3 or product.template_id == 4 %}
            <table>
                <tr>
                    <td><label>护照英文姓</label></td>
                    <td>{{ form.first_name }}</td>
                </tr>
                <tr>
                    <td><label>护照英文名</label></td>
                    <td>{{ form.last_name }}</td>
                </tr>
                {% for custom_field in custom_fields %}
                <tr>
                    <td><label>{{ custom_field.name }}</label></td>
                    <td><input type="text" name="field_{{ custom_field.name_en }}" value={{ custom_field.value }}></input></td>
                </tr>
                {% endfor %}
                <tr>
                    <td><label>航班号</label></td>
                    <td>{{ form.flight }}</td>
                </tr>
                {% if product.template_id == 3 %}
                <tr>
                    <td><label>到达日期</label></td>
                    <td class="td-btn" onclick="changeTravelDate();">
                        <input type="text" readonly="readonly" name="date" placeholder="yyyy-mm-dd" value="{% if travel_date %}{{ travel_date|default:'' }}{% else %}{{ form.date.value|default:'' }}{% endif %}"/>
                    </td>
                </tr>
                <tr>
                    <td><label>到达时间</label></td>
                    {% if user_agent == 4 %}
                    <td class="td-btn" onclick="changeTime();">
                        <input type="text" name="time" placeholder="HH:MM" value="{% if form.time.value %}{{ form.time.value }}{% endif %}"/>
                    {% else %}
                    <td>
                        <span><input type="time" name="time" value="{{ form.time.value }}"/></span>
                    {% endif %}
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td><label>起飞日期</label></td>
                    <td class="td-btn" onclick="changeTravelDate();">
                        <input type="text" readonly="readonly" name="date" placeholder="yyyy-mm-dd" value="{% if travel_date %}{{ travel_date|default:'' }}{% else %}{{ form.date.value|default:'' }}{% endif %}"/>
                        <i class="icon icon-date"></i>
                    </td>
                </tr>
                <tr>
                    <td><label>起飞时间</label></td>
                    {% if user_agent == 4 %}
                    <td class="td-btn" onclick="changeTime();">
                        <input type="text" name="time" placeholder="HH:MM" value="{% if form.time.value %}{{ form.time.value }}{% endif %}"/>
                    {% else %}
                    <td>
                        <span><input type="time" name="time" value="{{ form.time.value }}"/></span>
                    {% endif %}
                    </td>
                </tr>
                {% endif %}
            </table>
            {% else  %}
            {% if product.template_id != 5 %}
            <table>
                <tr>
                    <td><label>护照英文姓</label></td>
                    <td>{{ form.first_name }}</td>
                </tr>
                <tr>
                    <td><label>护照英文名</label></td>
                    <td>{{ form.last_name }} </td>
                </tr>
                {% for custom_field in custom_fields %}
                <tr>
                    <td><label>{{ custom_field.name }}</label></td>
                    <td><input type="text" name="field_{{ custom_field.name_en }}" value={{ custom_field.value }}></input></td>
                </tr>
                {% endfor %}
                <tr>
                    <td><label>使用日期</label></td>
                    {% if product.pk != 81 %}
                    <td class="td-btn" onclick="changeTravelDate();">
                        <input type="text" readonly="readonly" name="date" placeholder="yyyy-mm-dd" value="{% if travel_date %}{{ travel_date|default:'' }}{% else %}{{ form.date.value|default:'' }}{% endif %}"/>
                        <i class="icon icon-date"></i>
                    </td>
                    {% else %}
                    <td class="td-btn">
                        <input type="text" readonly="readonly" name="date" placeholder="yyyy-mm-dd" value="2014-10-25"/>
                        <i class="icon icon-date"></i>
                    </td>
                    {% endif %}
                </tr>
                {% if not product.is_type_lists %}
                <tr>
                    {% if product.template_id == 8 %}
                    <td><label>天数</label></td>
                    {% else %}
                    <td><label>数量</label></td>
                    {% endif %}
                    <td>
                        <input type="hidden" name="type" value="{{ product.type.pk }}">
                        <input type="hidden" name="category" value="{{ product.type.category }}">
                        <input type="hidden" placeholder="请选择类型" position="{{ product.type.position }}"/>
                        <input type="number" name="count" {% if product.type.count or product.type.count == 0 %}value="{{ product.type.count }}"{% else %}value="1"{% endif %}>
                    </td>
                </tr>
                {% if product.times %}
                <tr>
                    <td><label>{{ product.time_title }}</label></td>
                    <td>
                        <select name="ptime">
                        {% for time in product.times %}
                            {% if time.start_time == time.end_time %}
                            <option value="{{ time.pk }}" {% if time.pk == type.time_id %}selected="selected"{% endif %}>{{ time.start_time|format_time }}</option>
                            {% else %}
                            <option value="{{ time.pk }}" {% if time.pk == type.time_id %}selected="selected"{% endif %}>{{ time.start_time|format_time }} ~ {{ time.end_time|format_time }}</option>
                            {% endif%}
                        {% endfor %}
                        </select>
                    </td>
                </tr>
                {% endif %}
                <tr>
                    <td><label>价格</label></td>
                    <td>
                        <strong><span>￥</span><b class="type-price">{{ product.type.price }}</b></strong>
                    </td>
                </tr>
                {% endif  %}
            </table>
            {% endif %}
            {% endif %}
            {% if product.is_type_lists %}
            <div class="types">
                {% for type in product.types %}
                <table>
                    <tr>
                        <td><label>购买类型</label></td>
                        <td class="td-btn changeType">
                            <input type="hidden" name="type" value="{{ type.pk }}">
                            <input type="hidden" name="category" value="{{ type.category }}">
                            <input type="text" placeholder="请选择类型" value="{{ type.name }}" position="{{ type.position }}" readonly="readonly"/>
                            <i class="icon icon-type"></i>
                        </td>
                    </tr>
                    <tr>
                        {% if product.template_id == 8 %}
                        <td><label>天数</label></td>
                        {% else %}
                        <td><label>数量</label></td>
                        {% endif %}
                        <td><input type="number" name="count" {% if type.count or type.count == 0 %}value="{{ type.count }}"{% else %}value="1"{% endif %}></td>
                    </tr>
                    {% if product.times %}
                    <tr>
                        <td><label>{{ product.time_title }}</label></td>
                        <td>
                            <select name="ptime">
                            {% for time in product.times %}
                                {% if time.start_time == time.end_time %}
                                <option value="{{ time.pk }}" {% if time.pk == type.time_id %}selected="selected"{% endif %}>{{ time.start_time|format_time }}</option>
                                {% else %}
                                <option value="{{ time.pk }}" {% if time.pk == type.time_id %}selected="selected"{% endif %}>{{ time.start_time|format_time }} ~ {{ time.end_time|format_time }}</option>
                                {% endif%}
                            {% endfor %}
                            </select>
                        </td>
                    </tr>
                    {% endif %}
                    <tr>
                        <td><label>价格</label></td>
                        <td>
                            <strong><span>￥</span><b class="type-price">{{ type.price }}</b></strong>
                        </td>
                    </tr>
                </table>
                {% endfor %}
            </div>
            <table style="border-spacing: inherit;">
                <tr>
                    <td id="add_type"><i class="icon icon-plus"></i>添加新购买类型</td>
                </tr>
            </table>
            {% endif %}
            {% if product.is_carrying_baby %}
            <p style="margin:-15px -10px 20px -10px;display: block;">
                <span class="booking-agreement" style="float: left;">
                    <input type="checkbox" id="baby-check">
                    <label for="baby-check">
                        <span>携带婴儿</span>
                    </label>
                </span>
                <span class="baby-count">
                    <input type="number" id="id_baby_count" name="baby_count" value="{{ form.baby_count.value|default:'' }}"/>位</span>
                </span>
            </p>
            <p style="clear: both; margin-top: -20px;" class="baby-count">
                ({{ product.baby_description }}，婴儿免费，但需告知)
            </p>
            <p style="clear: both; margin:0px;"></p>
            {% endif %}
            {% if product.template_id != 1 %}
            {% if product.template_id != 5 %}
            {% if product.template_id != 8 %}
                <h2 class="hotel" style="margin-top: 35px;"><i class="icon icon-info2"></i>接送服务</h2>
                <p style="color: #999; margin: -5px 0px 5px 0px;" class="hotel">{{ product.pick_range }}</p>
                {% if plan.device_id == 'share-product-order' %}
                <table cellspacing="0" class="hotel">
                    <tr>
                        <td class="hotel-label"><p>候车酒店</p></td>
                        <td>
                            <input type="text" name="hotel_name"  placeholder="酒店名" value="{{ form.hotel_name.value|default:'' }}"/>
                        </td>
                    </tr>
                    {% if product.support_hotels %}
                    <tr class="support-hotels">
                        <td class="hotel-label"><p>送达酒店</p></td>
                        <td>
                            <input type="text" name="second_hotel_name"  placeholder="酒店名" value="{{ form.second_hotel_name.value|default:'' }}"/>
                        </td>
                    </tr>
                    {% endif %}
                <table>
                {% else %}
                <input id="id_hotel_name" name="hotel_name" type="hidden" value="{{ form.hotel_name.value|default:''|safe }}">
                <input id="id_second_hotel_name" name="second_hotel_name" type="hidden" value="{{ form.second_hotel_name.value|default:''|safe }}">
                <table cellspacing="0" class="hotel">
                    <tr>
                        {% if product.support_hotels %}
                        <td class="hotel-label"><p>候车酒店</p></td>
                        {% else %}
                            {% if product.hotel_type == 1 %}
                            <td class="hotel-label"><p>候车酒店</p></td>
                            {% else %}
                                {% if product.hotel_type == 2 %}
                                <td class="hotel-label"><p>送达酒店</p></td>
                                {% else %}
                                <td class="hotel-label"><p>接送酒店</p></td>
                                {% endif %}
                            {% endif %}
                        {% endif %}
                        <td class="td-btn td-hotel" name="hotel_name" id="hotel_name">
                            {% if not form.hotel_name.value %}
                            <input type="text" placeholder="酒店名" style="margin-top: 14px; margin-left: 0px;"/>
                            <i class="icon icon-type"></i>
                            {% else %}
                                {% if form.hotel_name.value == 'not_book_hotel' %}
                                在您预订好酒店后，可以通过微信服务号或400电话与我们联系，以确认接送地点和时间。
                                {% else %}
                                    {% if form.hotel_name.value == 'no_hotel' %}
                                    在预订成功后，您可以通过微信服务号或400电话与我们联系，以确认接送地点和时间。
                                    {% else %}
                                        {% if form.hotel_name.value == 'stay_family' %}
                                            在预订成功后，您可以通过微信服务号或400电话与我们联系，以确定您最方便的接送地点和时间。
                                        {% else %}
                                        <input type="text" placeholder="酒店名" style="margin-top: 14px; margin-left: 0px;" value="{{ form.hotel_name.value|default:'' }}">
                                        <i class="icon icon-type"></i>
                                        {% endif %}
                                    {% endif %}
                                {% endif %}
                            {% endif %}
                        </td>
                    </tr>
                    {% if product.support_hotels %}
                    <tr class="support-hotels">
                        <td class="hotel-label"><p>送达酒店</p></td>
                        <td class="td-btn td-hotel" name="second_hotel_name" id="second_hotel_name">
                            {% if not form.second_hotel_name.value %}
                            <input type="text" readonly="readonly" placeholder="请选择" style="margin-top: 14px; margin-left: 0px;"/>
                            <i class="icon icon-type"></i>
                            {% else %}
                                {% if form.second_hotel_name.value == 'not_book_hotel' %}
                                在您预订好酒店后，可以通过微信服务号或400电话与我们联系，以确认接送地点和时间。
                                {% else %}
                                    {% if form.second_hotel_name.value == 'no_hotel' %}
                                    在预订成功后，您可以通过微信服务号或400电话与我们联系，以确认接送地点和时间。
                                    {% else %}
                                        {% if form.second_hotel_name.value == 'stay_famliy' %}
                                            在预订成功后，您可以通过微信服务号或400电话与我们联系，以确定您最方便的接送地点和时间。
                                        {% else %}
                                        <input type="text" readonly="readonly" placeholder="请选择" style="margin-top: 14px; margin-left: 0px;" value="{{ form.second_hotel_name.value|default:'' }}">
                                        <i class="icon icon-type"></i>
                                        {% endif %}
                                    {% endif %}
                                {% endif %}
                            {% endif %}
                        </td>
                    </tr>
                    {% endif %}
                </table>
                {% endif %}
                <p class="surcharge">
                    <input type="hidden" name="surcharge" id="id_surcharge" value="{{ form.surcharge.value|default:'' }}">
                    <span>接送附加费</span><span class="surcharge-price">{{ form.surcharge.value|default:'0' }}</span>
                </p>
                {% if product.support_hotels %}
                <p style="margin-left: -10px;">
                    <span class="booking-agreement">
                        <input type="checkbox" id="support_hotels">
                        <label for="support_hotels">接送酒店相同</label>
                    </span>
                </p>
                {% endif %}
            {% endif %}
            {% endif %}
            {% endif %}
            <div class="total">
                <p>总价：</p>
                <p><strong style="font-size:22px; font-weight: 100;">￥<span id="total_prices"></span></strong></p>
            </div>
            <h2><i class="icon icon-user"></i>联系人信息</h2>
            <table cellspacing="0">
                <tr>
                    <td><label>姓名</label></td>
                    <td>{{ form.contact_name }}</td>
                </tr>
                <tr>
                    <td><label>手机</label></td>
                    <td><input type="number" value="{{ form.contact_tel.value|default:'' }}" name="contact_tel" placeholder="手机"></td>
                </tr>
                <tr>
                    <td><label>邮箱</label></td>
                    <td>{{ form.contact_email }}</td>
                </tr>
                {% if product.template_id == 5 %}
                <tr>
                    <td><label>收货地址</label></td>
                    <td>{{ form.contact_address }}</td>
                </tr>
                {% endif %}
            </table>
            <p class="booking-agreement" style="margin: 45px 0px 25px -10px;">
                <input id="booking-agreement-cb" checked="checked" type="checkbox" name="detail">
                <label for="booking-agreement-cb">接受本产品的
                    <a href="###" id="detail" style="margin-left: -2px;">服务条款</a>
                    <span class="help_text">条款必须接受</span>
                </label>
            </p>
            {% if is_order %}
            <input id="submit" class="btn-primary" value="去付款" type="submit">
            {% else %}
            <input id="submit" class="btn-primary" value="下一步" type="submit">
            {% endif %}
        </form>
    </section>
    <script src="{{ STATIC_URL }}mobile/js/zepto.min.js"></script>
    <script src="{{ STATIC_URL }}mobile/js/common/lib/app-schema.js"></script>
    <script id='type-template' type="text/template">
        <table>
            <tr>
                <td><label>购买类型</label></td>
                <td class="td-btn changeType">
                    <input type="hidden" name="type" value="{{ product.type.pk }}">
                    <input type="hidden" name="category" value="{{ product.type.category }}">
                    <input type="text" value="{{ product.type.name }}" position="1000" readonly="readonly"/>
                    <i class="icon icon-type"></i>
                </td>
            </tr>
            <tr>
                <td><label>数量</label></td>
                <td><input type="number" value="1" name="count"></td>
            </tr>
            {% if product.times %}
            <tr>
                <td><label>{{ product.time_title }}</label></td>
                <td>
                    <select name="ptime">
                    {% for time in product.times %}
                        {% if time.start_time == time.end_time %}
                        <option value="{{ time.pk }}">{{ time.start_time|format_time }}</option>
                        {% else %}
                        <option value="{{ time.pk }}">{{ time.start_time|format_time }} ~ {{ time.end_time|format_time }}</option>
                        {% endif%}
                    {% endfor %}
                    </select>
                </td>
            </tr>
            {% endif %}
            <tr>
                <td><label>价格</label></td>
                <td>
                    <strong><span>￥</span><b class="type-price">{{ product.type.price }}</b></strong>
                </td>
            </tr>
        </table>
    </script>
    <script type="text/javascript">
    $(document).ready(function(){
        if ( typeof(android) != "undefined" ) {
            android.setTitle('{{ product.poi.name }}');
            {% if not is_breadtrip %}
            android.goBackApp(true);
            android.showContactUs(true);
            {% endif %}
        } else {
            JS2ObjCBridge.call("setTitle", ['{{ product.poi.name }}']);
            JS2ObjCBridge.call("goBackApp", [true]);
            JS2ObjCBridge.call("setPlanID", [{{ plan_id }}]);
            JS2ObjCBridge.call("showContactUs", [true]);
        }

        {% if form.hotel_name.value %}
        setHotelName('hotel_name', '{{ form.hotel_name.value|default:''|safe }}')
        {% endif %}

        {% if form.second_hotel_name.value %}
        setHotelName('second_hotel_name', '{{ form.second_hotel_name.value|default:''|safe }}')
        {% endif %}

        if(typeof String.prototype.trim !== 'function'){
            String.prototype.trim = function(){
            return this.replace(/(^\s*)|(\s*$)/g,"");
            }
        };

        {% if product.types %}
            var type_prices = new Object();
            {% for type in product.types %}
                type_prices["{{ type.pk }}_{{ type.category}}"] = {{ type.fee }};
            {% endfor %}
            type_prices["{{ product.type.pk }}_{{ product.type.category }}"] = {{ product.type.fee }};
        {% else %}
            var type_prices = null;
            var fee = {{ product.fee }};
        {% endif %}

        {% if success and not is_breadtrip %}
        if ( typeof(android) != "undefined" ) {
            window.android.setOrderSuccess();
        };
        {% endif %}


        var position = {{ position }};


        total_prices();

        var check_value = function(value, show_class, key){
            if (!value) {
                $("."+show_class).find(".error").text();
                $("."+show_class).show();
            };
        };

        $("#add_type").click(function(){
            var counts = 0;
            $("input[name='count']").each(function() {
                counts += parseInt($(this).val());
            });
            var type_template = Handlebars.compile($("#type-template").html());
            $(".types").append(type_template());
            $("input[position='1000']").attr("position", position);
            position += 1;
            total_prices();
        });

        $("input[name='count']").live("keyup", function(){
            var obj = $(this);
            var count = $(this).val()
            if (count > 9999) {
                obj.val(9999);
                count = 9999;
            };
            if (!count) {
                count = 0;
            };
            var counts = 0;
            $("input[name='count']").each(function() {
                counts += parseInt($(this).val());
            });
            if (type_prices){
                var id = $(this).parents("table").find("input[name='type']").val();
                var category = $(this).parents("table").find("input[name='category']").val();
                var price = type_prices[id + '_' + category] * count;
            } else {
                var price = fee * count;
            }
            $(this).parents("table").find(".type-price").text(price);
            total_prices();
        });

        $(".changeType").live("click", function() {
            var position = $(this).find("input[type='text']").attr("position");
            $("#changeType").attr('value', position);
            document.getElementById("submit").click();
        });

        $("#baby-check").click(function(){
            if ($(this).attr("checked")){
                $(".baby-count").show();
                var value = $("#id_baby_count").val();
                if (!value|| value=="0") {
                    $("#id_baby_count").attr("value", 1);
                };
            } else {
                $(".baby-count").hide();
                $("#id_baby_count").attr("value", 0);
            };
        });
        {% if form.baby_count.value %}
        $("#baby-check").click();
        {% endif %}

        var last_second_hotel_value = '';
        $("#support_hotels").change(function(){
            if ($(this).attr("checked")){
                $(".support-hotels").hide();
                last_second_hotel_value = $("#id_second_hotel_name").val();
                $("#id_second_hotel_name").val('');
            } else {
                $(".support-hotels").show();
                $("#id_second_hotel_name").val(last_second_hotel_value);
            };
        });

        {% if not form.second_hotel_name.value %}
        $("#support_hotels").click();
        {% endif %}

        $(".td-hotel").click(function(){
            var value = $(this).attr("name");
            if ( typeof(android) != "undefined" ) {
                {% if not is_breadtrip %}
                android.goBookingHotel(value);
                {% endif %}
            } else {
                JS2ObjCBridge.call("gobookinghotel", [value], function (response){
                    setHotelName(value, response);
                });
            }
            return;
        });

        $("#detail").on("click", function(){
            $("#viewDetail").val(true);
            document.getElementById("submit").click();
        });

        $("input[name='count']").live("change", function(){
            var obj = $(this);
            var count = $(this).val()
            if (!count) {
                count = 0;
            };
            var counts = 0;
            $("input[name='count']").each(function() {
                counts += parseInt($(this).val());
            });
            if (type_prices){
                var id = $(this).parents("table").find("input[name='type']").val();
                var category = $(this).parents("table").find("input[name='category']").val();
                var price = type_prices[id + '_' + category] * count;
            } else {
                var price = fee * count;
            }
            $(this).parents("table").find(".type-price").text(price);
            total_prices();
        });

    })
    </script>
</body>
</html>
